<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form inline>
        <el-form-item label="订单号：" class="filter-item">
          <el-input placeholder="请输入订单号" size="medium" v-model="orderNo"></el-input>
        </el-form-item>
         <el-form-item label="买家手机号：" class="filter-item">
          <el-input placeholder="请输入订单号" size="medium" v-model="name"></el-input>
        </el-form-item>
        <el-form-item label="分销员手机号：" class="filter-item">
          <el-input placeholder="请输入订单号" size="medium" v-model="name"></el-input>
        </el-form-item>
        <el-form-item label="订单状态：" class="filter-item">
          <el-select v-model="status" size="medium">
            <el-option v-for="(item, index) in statusList" :key="index" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="filter-item right">
          <el-button icon="el-icon-search" plain type="primary" @click="search" size="medium">搜索</el-button>
          <el-button icon="el-icon-setting" plain type="primary" @click="resetSearch" size="medium">重置</el-button>
        </el-form-item>
      </el-form>
      <el-form inline>
        <el-form-item label="订单导出：" class="filter-item">
          <el-date-picker
            value-format="timestamp"
            v-model="startTime"
            type="date"
            placeholder="开始日期">
          </el-date-picker> - 
          <el-date-picker
            value-format="timestamp"
            v-model="endTime"
            type="date"
            placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="filter-item">
          <el-button icon="el-icon-download" plain type="primary" @click="clickExportOrder" size="medium">导出订单</el-button>
        </el-form-item>
      </el-form>
    </div>
    <table-list :data="orderList">
      <template slot="columns">
        <el-table-column fixed="left" label="订单号" align="center" width="250px">
          <template slot-scope="scope">
            <div>订单号：{{ scope.row.orderNo }}</div>
            <div>下单时间：{{ scope.row.createTime }}</div>
          </template>
        </el-table-column>
        <el-table-column fixed="left" label="订单信息" align="center" min-width="200px">
          <template slot-scope="scope">
            <div class="flex flex-item--center" v-for="(item, index) in scope.row.ordersProductsList" :key="index">
              <el-popover
                ref="popover"
                placement="top-start"
                width="320"
                trigger="hover">
                <img :src="item.productsCoverCn" class="previewImage">
              </el-popover>
              <img v-popover:popover :src="item.productsCoverCn" class="thumbnail">
              <div class="block-right">
                <div>{{item.productsNameCn}}</div>
                <div>{{item.skuDescCn}}{{item.count}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="成交金额" align="center" min-width="100px">
          <template slot-scope="scope">
            {{ scope.row.totalPrice }}
          </template>
        </el-table-column>
        <el-table-column label="退款金额" align="center" min-width="100px">
          <template slot-scope="scope">
            {{ scope.row.totalPrice }}
          </template>
        </el-table-column>
        <el-table-column label="买家" align="center" min-width="100px">
          <template slot-scope="scope">
            {{ scope.row.mobile }}
          </template>
        </el-table-column>
        <el-table-column label="邀请者" align="center" min-width="100px">
          <template slot-scope="scope">
            {{ scope.row.totalPrice }}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" min-width="100px">
          <template slot-scope="scope">
            {{ scope.row.status | statusFilter}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="150px">
          <template slot-scope="scope">
            <div><el-button plain type="primary" size="mini" @click="clickToOrderDetail(scope.row)">查看详情</el-button></div>
            <div style="margin-top:10px"><el-button plain type="primary" size="mini" @click="clickToCompleteRefund(scope.row)" v-if="scope.row.status == 5">完成退款</el-button></div>
            <div style="margin-top:10px"><el-button plain type="primary" size="mini" @click="clickToCompleteRefund(scope.row)" v-if="scope.row.status == 5">退款失败</el-button></div>
          </template>
        </el-table-column>
      </template>
    </table-list>
    <list-pagination :total="total" :page="page" :pageSize="pageSize" :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange"></list-pagination>
    <!-- <sale-order-dialog :visible="saleOrderDialogVisible" @closeDialog="saleOrderDialogVisible = false" :dialogData="orderDetail"></sale-order-dialog> -->
  </div>
</template>

<script>
import list from '@/mixins/List'
import table from '@/components/Table'
import listPagination from '@/components/ListPagination'
// import saleOrderDialog from './components/saleOrderDialog'
import { getSaleOrderList, exportSaleOrder, getOrderDetail } from '@/api/order'

export default {
  name: 'orderList',
  components: {
    'table-list': table,
    listPagination,
    // saleOrderDialog
  },
  mixins: [list],
  extends: {},
  props: {},
  data () {
    return {
      orderNo: '',
      mobile: '',
      name: '',
      status: '',
      startTime: '',
      endTime: '',
      orderList: [],
      statusList: [
        {
          name: '全部',
          value: ''
        },
        {
          name: '退款中',
          value: 5
        },
        {
          name: '退款成功',
          value: 1
        }
      ],
      orderDetail: '',
      saleOrderDialogVisible: false
    }
  },
  computed: {},
  directives: {},
  filters: {},
  created () {},
  mounted () {
    this.getList()
  },
  watch: {},
  methods: {
    resetSearch () {
      this.orderNo = ''
      this.mobile = ''
      this.name = ''
      this.status = ''
      this.startTime = ''
      this.endTime = ''
    },
    async getList () {
      let { data } = await getSaleOrderList({
        orderNo: '',
        mobile: '',
        status: this.status,
        page: this.page,
        pageSize: this.pageSize
      })
      this.orderList = data.list
      this.total = data.total
    },
    search () {
      this.page = 1
      this.getList()
    },
    clickExportOrder () {
      exportSaleOrder({
        startTime: this.startTime,
        endTime: this.endTime,
        mobile: this.mobile,
        orderNo: this.orderNo,
        status: this.status
      })
    },
    async clickToOrderDetail ({ orderNo }) {
      let { data } = await getOrderDetail({
        orderNo
      })
      this.orderDetail = data
      this.saleOrderDialogVisible = true
    }
  },
  clickToCompleteRefund ({ orderNo }) {
    this.$confirm('确认完成退款?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      await getOrderDetail({ orderNo })
      this.$message({
        type: 'success',
        message: '完成退款成功!'
      })
      this.getList()
    }).catch(() => {
      // this.$message({
      //   type: 'info',
      //   message: '已取消完'
      // })
    })
  }
}
</script>
<style lang="scss" scoped>
</style>
